<!--
 * @Date: 2020-03-10 14:09:08
 * @LastEditors: 黄栋
 * @LastEditTime: 2020-04-14 20:32:18
 * @FilePath: /cloudAdmin/src/views/sale/order/Personer.vue
 -->
 <template>
  <div class="sec1">
    <el-card>
      <el-form :model="form" :inline="true" class="top-body" size="small" label-width="80px">
        <el-form-item label="订单类型">
          <el-select v-model="form.goods_type">
            <el-option label="个人订单" value="1"></el-option>
            <el-option label="企业订单" value="2"></el-option>
            <el-option label="代理订单" value="3"></el-option>
            <el-option label="渠道订单" value="4"></el-option>
          </el-select>

          <!-- <el-input v-model="form.goods_type" style="width:150px" placeholder="请输入"></el-input> -->
        </el-form-item>
        <el-form-item label="买家名称">
          <el-input v-model="form.keywords" style="width:150px" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input v-model="form.out_trade_no" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-date-picker
            type="date"
            placeholder="请选择"
            style="width:140px"
            value-format="yyyy-MM-dd"
            class="dateBox"
            v-model="form.start_time"
          ></el-date-picker>
          <span>-</span>
          <el-date-picker
            type="date"
            placeholder="请选择"
            style="width:140px"
            value-format="yyyy-MM-dd"
            class="dateBox"
            v-model="form.end_time"
          ></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button @click="form.page=1;getDataList()" type="primary">查询</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <el-tabs class="subTab" v-model="status" @tab-click="handleClick">
        <el-tab-pane label="全部" name="0"></el-tab-pane>
        <el-tab-pane label="待付款" name="1"></el-tab-pane>
        <el-tab-pane label="待发货" name="2"></el-tab-pane>
        <el-tab-pane label="已发货" name="3"></el-tab-pane>
        <el-tab-pane label="交易成功" name="five"></el-tab-pane>
      </el-tabs>

      <!-- <div style="margin-top:10px;width:100px;display:flex">
      <el-button
        type="danger"
        size="mini"
        @click="deleteHandle()"
        :disabled="dataListSelections.length <= 0"
      >批量删除</el-button>
      <el-button size="mini">上架</el-button>
      <el-button size="mini">下架</el-button>
      </div>-->

      <div class="components-edit">
        <div class="components-table">
          <el-table
            ref="multipleTable"
            :data="tableData"
            tooltip-effect="dark"
            style="width: 100%;padding: 8px 0 ! important;"
            :header-cell-style="{background:'#F7F7F7',color:'#1E1E1E'}"
            v-loading="dataListLoading"
            size="mini"
            @selection-change="selectionChangeHandle"
          >
            <el-table-column prop="out_trade_no" label="商品" width="220" show-overflow-tooltip>
              <template slot-scope="{row}">
                <div>订单编号{{ row.out_trade_no }}</div>
                <img
                  style="margin-right:8px"
                  v-for="(item,index) in row.list"
                  :key="index"
                  :src="item.thumb"
                  class="goodsImg"
                />
              </template>
            </el-table-column>
            <el-table-column prop="number" sortable label="数量" show-overflow-tooltip></el-table-column>
            <el-table-column prop="buyer_name" label="买家名称" show-overflow-tooltip></el-table-column>
            <el-table-column prop="pay_price" label="支付金额" sortable></el-table-column>
            <el-table-column prop="type_2" sortable label="订单状态">
              <template slot-scope="{row}">
                <el-button type="danger" size="mini" v-if="row.type_2==1">未发货</el-button>
                <el-button type="success" size="mini" v-else-if="row.type_2==2">已发货</el-button>
                <el-button type="success" size="mini" v-else-if="row.type_2==3">已收货</el-button>
                <el-button type="warning" size="mini" v-else>未支付</el-button>
              </template>
            </el-table-column>

            <el-table-column width="200" align="ceneter" label="操作">
              <template slot-scope="{row}">
                <span style="display:inline-block;margin-right:10px;vertical-align: top;">
                  <div>
                    <!-- <el-button type="text" size="mini" @click="deleteHandle(row.id)">订单详情</el-button> -->
                  </div>
                  <div>
                    <el-button type="text" size="mini" @click="lookAddress(row)">收货地址</el-button>
                  </div>
                  <div v-if="row.type_2==2||row.type_2==3">
                    <el-button type="text" size="mini" @click="getExpress(row)">查看物流</el-button>
                  </div>
                </span>
                <el-button type="text" size="mini" @click="getOrderDetail(row)">订单详情</el-button>
                <el-button
                  v-if="row.type_2==1"
                  size="mini"
                  @click="orderId=row.id; postShow=true"
                >立即发货</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            style="padding:20px;"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="form.page"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="form.page_num"
            :total="totalPage"
            layout="total, sizes, prev, pager, next, jumper"
          ></el-pagination>
        </div>
      </div>
    </el-card>
    <el-dialog title="收货地址" :close-on-click-modal="false" :visible.sync="addressShow">
      <el-form size="small">
        <el-form-item label>{{addressInfo.name}} {{addressInfo.phone}}</el-form-item>
        <el-form-item label>{{addressInfo.address}}</el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog title="立即发货" :close-on-click-modal="false" :visible.sync="postShow">
      <el-form
        :model="editform"
        validate-on-rule-change
        :rules="dataRule"
        ref="dataForm"
        size="small"
      >
        <el-form-item label="物流公司" prop="shipper_code">
          <el-select v-model="editform.shipper_code" style="width:200px" placeholder="请选择">
            <el-option
              v-for="item in logisticList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="快递单号" prop="logistic_code">
          <el-input style="width:200px" v-model="editform.logistic_code" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="postShow = false">取消</el-button>
        <el-button type="primary" @click="dataFormSubmit">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="物流信息" :close-on-click-modal="false" :visible.sync="tracesShow">
      <el-timeline reverse>
        <el-timeline-item
          v-for="(activity, index) in Traces"
          :key="index"
          :timestamp="activity.AcceptTime"
        >{{activity.AcceptStation}}</el-timeline-item>
      </el-timeline>
    </el-dialog>
    <OrderDetail v-if="showDetail" ref="orderDetaulRef" />
  </div>
</template>

<script>
import {
  get_order_co_list,
  get_order_co_info,
  add_tracking,
  get_order_express
} from "@/utils/api/sale";
import { mapState, mapActions } from "vuex";
import OrderDetail from "./orderDetail";
export default {
  components: { OrderDetail },
  computed: {
    ...mapState({
      logisticList: state => state.config.logisticList,
      company: state => state.company,
      users_id: state => state.user.id
    }),
    logistic() {
      let name = "";
      let nameList = this.logisticList.filter(
        item => item.value == this.editform.shipper_code
      );
      if (nameList[0] && nameList[0].name) {
        name = nameList[0].name;
      }
      return name;
    }
  },
  data() {
    return {
      editform: {
        logistic_code: "",
        shipper_code: ""
      },
      Traces: [], //物流信息
      tracesShow: false, //物流信息
      showDetail: false,
      showTop: false,
      tableData: [],
      addressInfo: {},
      postShow: false,
      shipper_code: "",
      logistic_code: "",
      orderId: "",
      addressShow: false,
      status: "",
      totalPage: 0,
      dataListLoading: false,
      dataListSelections: [],
      form: {},
      dataRule: {
        logistic_code: [
          { required: true, message: "快递单号不能为空", trigger: "blur" }
        ],
        shipper_code: [
          { required: true, message: "请选择物流公司", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.resetForm();
    this.getDataList();
  },
  methods: {
    resetForm() {
      this.form = {
        page: 1,
        goods_type: "1",
        page_num: 10,
        start_time: "",
        type_2: "",
        type: "",
        keywords: "",
        end_time: "",
        out_trade_no: ""
      };
    },
    /**获取列表数据 */
    getDataList() {
      this.dataListLoading = true;
      console.log(this.status);
      this.form.type_2 = this.status > 1 ? this.status - 1 : "";
      this.form.type = this.status == 1 ? "1" : "";
      get_order_co_list(this.form)
        .then(data => {
          this.dataListLoading = false;
          if (data.code == 200) {
            this.tableData = data.data.list;
            this.totalPage = data.data.total;
          } else {
            this.tableData = [];
            this.totalPage = 0;
          }
        })
        .catch(() => {
          this.dataListLoading = false;
          this.$message.error("服务器错误，请联系管理员");
        });
    },
    handleClick(val) {
      this.form.page = 1;
      this.getDataList();
    },
    getOrderDetail(data) {
      // this.$router.push("./orderInfo",)
      this.$router.push({path: '/orderInfo', query: {id: data.id}});
    },
    /**查看物流 */
    getExpress(item) {
      get_order_express({
        shipper_code: item.shipper_code,
        logistic_code: item.logistic_code
      }).then(res => {
        if (res.Success) {
          this.Traces = res.Traces;
          this.tracesShow = true;
        } else {
          this.Traces = [];
        }
      });
    },
    /**发货 */
    dataFormSubmit() {
      //   console.log(this.orderId);
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          add_tracking({
            co_order_id: this.orderId,
            logistic_code: this.editform.logistic_code,
            logistic: this.logistic,
            shipper_code: this.editform.shipper_code
          }).then(res => {
            if (res.code == 200) {
              this.postShow = false;
              this.getDataList();
            } else {
              this.$message.error(res.message);
            }
          });
        }
      });
    },
    /**查看收货地址 */
    lookAddress(item) {
      this.addressInfo = item;
      this.addressShow = true;
    },
    /**新增 / 修改 */
    addOrUpdateHandle(id) {
      this.$emit("editShop", id);
    },
    /**删除 */
    deleteHandle(id) {
      var ids = id
        ? [id]
        : this.dataListSelections.map(item => {
            return item.id;
          });
      this.$confirm(
        `确定对[id=${ids.join(",")}]进行[${id ? "删除" : "批量删除"}]操作?`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(() => {
          del_goods_info({ id: ids }).then(data => {
            if (data && data.code == 200) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.getDataList();
                }
              });
            } else {
              this.$message.error(data.message);
            }
          });
        })
        .catch(() => {});
    },
    /**商品上下架 */
    changeStatus(data) {
      edit_goods_status({
        id: data.id,
        status: data.status == "1" ? "2" : "1"
      }).then(res => {
        if (res.code == 200) {
          this.getDataList();
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 每页数
    handleSizeChange(val) {
      this.form.page_num = val;
      this.form.page = 1;
      this.getDataList();
    },
    // 当前页
    handleCurrentChange(val) {
      this.form.page = val;
      this.getDataList();
    },
    selectionChangeHandle(val) {
      this.dataListSelections = val;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.goodsImg {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}
.top-close {
  display: flex;
  align-items: center;
  float: right;
  cursor: pointer;
  padding-right: 10px;
  padding-top: 20px;
  font-size: 14px;
  i {
    margin-left: 8px;
  }
}
.shopStatus {
  color: rgba(9, 109, 217, 1);
  font-size: 12px;
}
.top-body {
  background-color: #f2f2f2;
  padding: 10px;
  border-radius: 5px;
}

.components-edit {
  margin-top: 10px;

  .components-table {
    border: 1px solid #e6e6e6;
  }
  .block {
    padding: 10px 20px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .page-all {
      font-size: 12px;
      color: #666666;
      letter-spacing: 2px;
    }
  }
}
</style>


